html{
    border: 0;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
body{
    margin: 0;
    border: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#background{
    background: repeating-linear-gradient(359deg, rgb(182 196 255) 0%, rgb(207 225 255 / 78%) 100%);
    min-height: 100%;
    min-width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#display{
    background-color: #ffffff85;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: 2rem;
    max-width: 500px;
    margin-top: 5rem;
    margin-bottom: 5em;
    margin-left: 3%;
    margin-right: 3%;
}
#display > h1{
    margin: 0 0 0.5rem 0;
}
#display > h3{
    margin: 0 0 0.5rem 0;
}
#imgs{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
}
#imgs>img{
    display: block;
    width: 48%;
    margin: 1%;
    transition: all 0.8s;
    cursor: pointer;
}

#imgs>img:hover{
    margin: 0.5% 1.5% 1.5% 0.5%;
    box-shadow: #00000087 0.2rem 0.2rem 1rem 0px;
    transition: all 0.3s;
}


/* 窄窗口 */
@media screen and (max-width:550px){
    #imgs>img{
        display: block;
        width: 98%;
        margin: 1%;
    }
}
/*手机 css*/
@media screen and (orientation:portrait) and (max-device-width:800px) and (max-device-height:1000px){
    :root {
        font-size: 2rem;
    }
    #imgs>img{
        display: block;
        width: 98%;
        margin: 1%;
    }
    #display{
        max-width:98vw;
    }
}